<template>
  <div>
    <v-chart :force-fit="true" :height="height" :data="data" :scale="scale">
      <v-legend position="top" :offsetY="10" />
      <v-tooltip />
      <v-axis />
      <v-line position="month*temperature" color="city" />
      <v-point position="month*temperature" color="city" :size="4" :v-style="style" :shape="'circle'" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { month: '1月', '应缴租金': 10777.0, '实缴租金': 3119, '欠租金额': 6986 },
  { month: '2月', '应缴租金': 6900, '实缴租金': 4112, '欠租金额': 1922 },
  { month: '3月', '应缴租金': 9532, '实缴租金': 5227, '欠租金额': 3798 },
  { month: '4月', '应缴租金': 1465, '实缴租金': 815, '欠租金额': 192 },
  { month: '5月', '应缴租金': 1874, '实缴租金': 1119, '欠租金额': 700 },
  { month: '6月', '应缴租金': 21225, '实缴租金': 15112, '欠租金额': 5592 },
  { month: '7月', '应缴租金': 25292, '实缴租金': 17220, '欠租金额': 9754 },
  { month: '8月', '应缴租金': 2665, '实缴租金': 1616, '欠租金额': 1022 },
  { month: '9月', '应缴租金': 2323, '实缴租金': 1422, '欠租金额': 874 },
  { month: '10月', '应缴租金': 1813, '实缴租金': 1023, '欠租金额': 762 },
  { month: '11月', '应缴租金': 41359, '实缴租金': 6267, '欠租金额': 33982 },
  { month: '12月', '应缴租金': 9786, '实缴租金': 4988, '欠租金额': 4982 }
]

const dv = new DataSet.View().source(sourceData)
dv.transform({
  type: 'fold',
  fields: ['应缴租金', '实缴租金', '欠租金额'],
  key: 'city',
  value: 'temperature'
})
const data = dv.rows

const scale = [{
  dataKey: 'month',
  min: 0,
  max: 1
}]

export default {
  data () {
    return {
      data,
      scale,
      height: 400,
      style: { stroke: '#fff', lineWidth: 1 }
    }
  }
}
</script>
